<!--
 * @Author: 谢陈洁
 * @Date: 2024-11-15 21:48:18
 * @LastEditors: 谢陈洁
 * @LastEditTime: 2024-11-19 11:01:22
 * @Description: file content
-->
<template>
  <div class="item">
    <img class="image" :src="itemData.image.url" alt="">
    <div class="content">
      <div class="summary">{{ itemData.summaryText }}</div>
      <div class="name"> {{itemData.houseName}}</div>
      <div class="info">
        <VanRate :size="15" v-model="itemData.commentScore" readonly allow-half></VanRate>
        <span class="price">￥{{ itemData.finalPrice }}</span>
      </div>
    </div>
  </div>
</template>
<script setup>
const props = defineProps({
  itemData:{
    type: Object,
    default:()=>({})
  }
})
</script>
<style lang="less" scoped>
.item {
  position: relative;
  border-radius: 6px;
  overflow: hidden;
  color: white;
  .image {
    width: 100%;
    height: 100%;
  }
  .content {
    position: absolute;
    width: 100%;
    padding: 10px;
    bottom: 0;
    box-sizing: border-box;
    font-size: 14px;
    --van-rate-icon-full-color: white !important;

    .summary {
      font-size: 12px;
    }
    .name {
      margin: 3px 0;
      display: -webkit-box;  /* 显示多行文本容器 */
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;  /* 显示行数 */
      text-overflow: ellipsis;  /* 省略号代替多出部分文字 */
      overflow: hidden;  /* 隐藏多出部分文字 */
    }
    .info {
      display: flex;
      justify-content: space-between;
    }
  }

}
</style>
